<template>
  <el-dialog
    v-dialogDrag
    :class="title === '编辑' ? 'elDialog' : ''"
    :visible.sync="dialogVisible"
    :title="title"
    width="750px"
    @close="resetForm('ruleForm')"
  >
    <button-group
      ref="buttonGroup"
      @submitForm="submitForm('ruleForm')"
      @cancel="dialogVisible = false"
    />
    <div class="formTopFont">物料入库单</div>
    <el-row>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库单号" prop="inNo">
              <el-input
                v-model="ruleForm.inNo"
                maxlength="20"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供方名称" prop="supplierId">
              <el-select v-model="ruleForm.supplierId" style="width: 100%">
                <el-option
                  v-for="item in supplierAllList"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料" prop="materialId">
              <el-select
                v-model="ruleForm.materialId"
                style="width: 100%"
                @change="
                  ruleForm.unit = materialList.find(
                    (item) => item.id === ruleForm.materialId
                  ).unit
                "
              >
                <el-option
                  v-for="item in materialList"
                  :key="item.id"
                  :label="`${item.materialName} ${
                    item.unit ? '【' + item.unit + '】' : ''
                  }`"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.materialName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.unit
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库批号" prop="inBatch">
              <el-input v-model="ruleForm.inBatch" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="num">
              <el-input-number
                v-model="ruleForm.num"
                style="width: 100%"
                :precision="0"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input-number
                v-model="ruleForm.price"
                style="width: 100%"
                :max="99999999"
                :precision="2"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库日期" prop="inDate">
              <el-date-picker
                v-model="ruleForm.inDate"
                type="date"
                placeholder="选择日期时间"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库类别" prop="inType">
              <el-input v-model="ruleForm.inType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库房名称" prop="wmsId">
              <tree-select
                ref="treeSelect"
                style="width: 100%"
                :props="{
                  value: 'id',
                  label: 'wmsName',
                  children: 'children',
                }"
                :options="wmsListAll"
                :accordion="true"
                :disabled="false"
                :value="ruleForm.wmsId"
                search-key="wmsName"
                @getNode="getValue($event)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库人" prop="userId">
              <el-select v-model="ruleForm.userId" style="width: 100%">
                <el-option
                  v-for="item in userAllList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                maxlength="200"
                type="textarea"
                rows="3"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <bottom-font
      v-if="title === '编辑'"
      ref="bottomFont"
      :obj-name="ruleForm.userName"
      :rew-name="ruleForm.reviewer"
      :obj-date="ruleForm.inDate"
    />
  </el-dialog>
</template>
<script>
import TreeSelect from "@/components/TreeSelect";
import { timeFormatToString } from "@/utils/function";
import bottomFont from "@/components/BottomFont";
export default {
  components: { TreeSelect, bottomFont },
  props: {
    supplierAllList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    wmsListAll: {
      type: Array,
      default: () => {
        return [];
      },
    },
    materialList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    userAllList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    const checkInNo = async (rule, value, callback) => {
      const res = await this.$axios.get(
        `/wms/in/verifyNoUnique?no=${value}&id=${this.ruleForm.id || ""}`
      );
      if (res?.data.code === 200) {
        return res.data.data
          ? callback()
          : new Error(callback("入库单号重复！"));
      } else {
        return new Error(callback(res.data.msg));
      }
    };
    return {
      title: "",
      ruleForm: {
        userId: "",
        supplierId: "",
        inNo: "",
        inBatch: "",
        inDate: timeFormatToString(new Date()).slice(0, 10),
        inType: "",
        price: "",
        num: "",
        wmsId: "", // 库房库位
        materialId: "",
        remark: "", // 描述
      },
      rules: {
        inNo: [
          { required: true, message: "入库单号不能为空！", trigger: "blur" },
          { validator: checkInNo, trigger: "blur" },
        ],
        materialId: [
          { required: true, message: "物料不能为空！", trigger: "change" },
        ],
        num: [{ required: true, message: "数量不能为空！", trigger: "blur" }],
        inDate: [
          { required: true, message: "请选择入库日期！", trigger: "change" },
        ],
      },
      dialogVisible: false,
    };
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      if (row && row.hasOwnProperty("id")) {
        this.title = "编辑";
        this.ruleForm = Object.assign({}, row);
      } else {
        this.title = "新增";
      }
      this.dialogVisible = true;
    },
    getValue(value) {
      if (value) {
        this.ruleForm.wmsId = value.id;
      } else {
        this.ruleForm.wmsId = "";
      }
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$axios.post("/wms/in/save", this.ruleForm);
          if (res?.data.code === 200) {
            this.$notify.success("提交成功！");
            this.dialogVisible = false;
            this.$emit("getTableInfo");
          } else {
            this.$notify.error(res.data.msg);
          }
        }
      });
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = Object.assign({}, this.$options.data.call(this).ruleForm);
    },
  },
};
</script>
<style lang="scss" scoped></style>
